<!doctype html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../../../favicon.ico">

    <title>accound</title>
    <!-- Bootstrap core CSS -->
    <link th:href="@{/webjars/bootstrap/4.2.1/css/bootstrap.css}" rel="stylesheet">
    <!--<link href="../css/index.css" rel="stylesheet">-->
    <style>
        #imageFile {
            display: none;
        }
        #image {
            width: 200px;
        }
    </style>
</head>

<body class="bg-light">
<div class="container-fluid">
    <div th:replace="common::navBar"></div>
    <div class="row">
        <div th:replace="common::sideBar"></div>
        <div class="col-md-10 order-md-1">
            <div class="py-5 text-center">
                <h4 class="mb-3">Account</h4>
            </div>
            <form class="needs-validation" novalidate th:action="@{/addAccount}" method="post">
                <input type="hidden" name="_method" value="put" th:if="${account!=null}"/>
                <input type="hidden" name="id" th:if="${account!=null}" th:value="${account.id}">
                <input id="imageUrl" type="hidden" name="imageUrl" th:value="${account!=null}?${account.imageUrl}">
                <input th:type="file" id="imageFile" >
                <div class="row">
                    <div class="mb-3 col-md-12">
                        <label for="name">账户名称</label>
                        <input name="name" type="text" class="form-control" id="name" placeholder="名目"
                               required th:value="${account!=null}?${account.name}">
                        <div class="invalid-feedback">
                            账户名称
                        </div>
                    </div>
                    <div class="mb-3 col-md-12">
                        <label for="occurYear">年份</label>
                        <input name="occurYear" type="text" class="form-control" id="occurYear" placeholder="年份"
                               required th:value="${account!=null}?${account.occurYear}">
                        <div class="invalid-feedback">
                            年份
                        </div>
                    </div>
                    <div class="mb-3 col-md-12">
                        <label for="occurMonth">月份</label>
                        <input name="occurMonth" type="text" class="form-control" id="occurMonth" placeholder="月份"
                               required th:value="${account!=null}?${account.occurMonth}">
                        <div class="invalid-feedback">
                            月份
                        </div>
                    </div>
                    <div class="mb-3 col-md-12">
                        <label for="price">金额</label>
                        <input name="price" type="text" class="form-control" id="price" placeholder="金额" required
                               th:value="${account!=null}?${account.price}">
                        <div class="invalid-feedback">
                            金额
                        </div>
                    </div>
                    <div class="mb-3 col-md-12">
                        <label>凭证</label>
                        <div th:if="${account!=null&&account.imageUrl!=null}">
                            <img id="image" th:src="${account!=null}?${account.imageUrl}">
                        </div>
                        <div th:else>
                            <img id="image" th:src="${'/images/default.jpg'}">
                        </div>
                        <div class="invalid-feedback">
                            凭证
                        </div>
                    </div>
                    <div class="dropup mb-3 col-md-12">
                        <label>凭证</label>
                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                            Dropup
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
                            <li><a href="#">收入</a></li>
                            <li><a href="#">支出</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                        </ul>
                    </div>
                    <!--<div class="mb-3 col-md-12">-->
                        <!--<label>类型</label>-->
                        <!--<select th:name="billType">-->
                            <!--<option value="">请选择</option>-->
                            <!--<option value="1" th:selected="${account!=null && account.billType == 1}">收入</option>-->
                            <!--<option value="2" th:selected="${account!=null && account.billType == 2}">支出</option>-->
                        <!--</select>-->
                        <!--&lt;!&ndash;<input name="billType" type="text" class="form-control" id="billType" placeholder="类型" required&ndash;&gt;-->
                               <!--&lt;!&ndash;th:value="${account!=null}?${account.billType}">&ndash;&gt;-->
                        <!--<div class="invalid-feedback">-->
                            <!--类型-->
                        <!--</div>-->
                    <!--</div>-->
                    <div class="mb-3 col-md-12">
                        <label for="remark">备注</label>
                        <input name="remark" type="text" class="form-control" id="remark" placeholder="备注" required
                               th:value="${account!=null}?${account.price}">
                        <div class="invalid-feedback">
                            备注
                        </div>
                    </div>
                </div>
                <hr class="mb-4">
                <button class="btn btn-primary btn-lg" type="submit">提交</button>
                <a href="#" th:href="@{'/goToBills?userId=1'}" class="btn btn-primary btn-lg btn-success">取消</a>
            </form>
        </div>
    </div>

    <footer class="my-5 pt-5 text-muted text-center text-small">
        <p class="mb-1">&copy; 2017-2018 Company Name</p>
        <ul class="list-inline">
            <li class="list-inline-item"><a href="#">Privacy</a></li>
            <li class="list-inline-item"><a href="#">Terms</a></li>
            <li class="list-inline-item"><a href="#">Support</a></li>
        </ul>
    </footer>
</div>

<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script th:src="@{/webjars/jquery/3.3.1-1/jquery.js}"></script>
<script th:src="@{/webjars/bootstrap/4.2.1/js/bootstrap.js}"></script>
<script>
    $("#image").click(function () {
        $("#imageFile").click();
    })

    $("#imageFile").change(function () {
        var formData = new FormData();
        var file = $(this)[0].files[0];
        formData.append("file", file);
        $.ajax({
            url:'/uploadFile',
            type:'POST',
            data: formData,
            processData:false,  //tell jQuery not to process the data
            contentType: false,  //tell jQuery not to set contentType
            //这儿的三个参数其实就是XMLHttpRequest里面带的信息。
            success:function (arg,a1,a2) {
                $("#image").attr("src", arg.data);
                $("#imageUrl").attr("value", arg.data);
            }
        })
    });


</script>
</body>
</html>
